<template>
  <div id="personalCenter">
    <div class="wrapper">
      <!-- 返回按钮 -->
      <div class="back_part">
        <div class="back_btn" @click="goBack">
          <img src="@/assets/images/pc_black/auth/back.png" />
          <span>返回</span>
        </div>
      </div>

      <!-- 中间个人信息部分 -->
      <div class="centerBackground">
        <div class="userInfo">
          <img
            class="userInfo_left"
            :src="
              userInfo.avatar
                ? userInfo.avatar
                : require('@/assets/images/mobile_black/center/avatar_default.png')
            "
          />

          <div class="userInfo_right">
            <div class="first_line">
              <span class="line_item" v-if="userInfo.nickname">{{ userInfo.nickname }}</span>

              <div class="line_item">
                <img
                  v-if="userInfo.is_auth === 1"
                  src="@/assets/images/pc_black/center/auth_ok_small.png"
                />
                <img v-else src="@/assets/images/pc_black/center/auth_not.png" />

                <span class="isCertifiedOk" v-if="userInfo.is_auth === 1">已认证</span>
                <span class="isCertifiedNotOk" v-else>未认证</span>
                <button v-if="userInfo.is_auth !== 1" @click="gotoAuth">
                  立即认证
                </button>
              </div>
            </div>

            <div class="second_line" v-if="userInfo.is_auth === 1">
              区块链地址：
              <span class="qklAddress">{{ userInfo.hashcode }}</span>
            </div>

            <div class="third_line">
              {{ userInfo.remark ? descSubstring(userInfo.remark) : "该用户什么也没留下" }}
            </div>
          </div>
        </div>

        <div class="userBtn">
          <div class="userBtn_btn_left_box" @click="gotoPersonalHomePage">
            <img
              class="userBtn_btn_left_img"
              src="@/assets/images/pc_black/center/personal_page.png"
            />
            <el-button class="userBtn_btn_left" type="primary">个人主页</el-button>
          </div>

          <i></i>

          <div class="userBtn_btn_right" @click.stop="changeDD" id="fade_bar_dd2">
            <img class="setter_img_left" src="@/assets/images/pc_black/center/setter.png" />
            <span>设置</span>
            <img
              class="setter_img_right"
              src="@/assets/images/pc_black/center/arrow_down_color.png"
            />

            <transition name="fade">
              <div class="bar_dd" v-if="isShowDD">
                <ul>
                  <li @click="gotoPersonalModify">修改资料</li>
                  <li @click="gotoPage">支付密码</li>
                </ul>
              </div>
            </transition>
          </div>
        </div>
      </div>

      <!-- 中间卡片部分 -->
      <div class="cards">
        <div class="cards_background" @click="gotoCurrentlyOwened">
          <el-badge
            v-if="isLoggedIn && cardCountFlag.already_pay_num > 0"
            :value="cardCountFlag.already_pay_num"
            :max="99"
          >
            <img src="@/assets/images/pc_black/center/have.png" />
          </el-badge>
          <img v-else src="@/assets/images/pc_black/center/have.png" />
          <span>当前拥有</span>
        </div>

        <div class="cards_background" @click="gotoCollection">
          <el-badge
            v-if="isLoggedIn && cardCountFlag.collect_num > 0"
            :value="cardCountFlag.collect_num"
            :max="99"
          >
            <img src="@/assets/images/pc_black/center/collection.png" />
          </el-badge>
          <img v-else src="@/assets/images/pc_black/center/collection.png" />
          <span>我的收藏</span>
        </div>

        <div class="cards_background" @click="gotoFavorite">
          <el-badge
            v-if="isLoggedIn && cardCountFlag.likes_num > 0"
            :value="cardCountFlag.likes_num"
            :max="99"
          >
            <img src="@/assets/images/pc_black/center/favorite.png" />
          </el-badge>
          <img v-else src="@/assets/images/pc_black/center/favorite.png" />
          <span>我的点赞</span>
        </div>

        <div class="cards_background" @click="gotoDiscount">
          <el-badge
            v-if="isLoggedIn && cardCountFlag.coupon_num > 0"
            :value="cardCountFlag.coupon_num"
            :max="99"
          >
            <img src="@/assets/images/pc_black/center/discount_pc.png" />
          </el-badge>
          <img v-else src="@/assets/images/pc_black/center/discount_pc.png" />
          <span>我的代金券</span>
        </div>

        <div class="cards_background" @click="gotoSyntheticList">
          <el-badge
            v-if="isLoggedIn && cardCountFlag.synthetic_num > 0"
            :value="cardCountFlag.synthetic_num"
            :max="99"
          >
            <img src="@/assets/images/pc_black/center/synthetic_enter.png" />
          </el-badge>
          <img v-else src="@/assets/images/pc_black/center/synthetic_enter.png" />
          <span>合成</span>
        </div>
      </div>

      <!-- 订单管理部分 -->
      <div class="order">
        <!-- 标题 -->
        <div class="orderTitle">订单管理</div>
        <!-- 筛选 -->
        <div class="orderFilter">
          <el-tabs v-model="filterPickValue" @tab-click="changeFilterPick">
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane label="已支付" name="1"></el-tab-pane>
            <el-tab-pane label="未支付" name="0"></el-tab-pane>
            <el-tab-pane label="已取消" name="-1"></el-tab-pane>
            <!-- <el-tab-pane label="已转赠" name="3"></el-tab-pane> -->
            <!-- <el-tab-pane label="已接收" name="4"></el-tab-pane> -->
          </el-tabs>
        </div>
        <!-- 表格内容 -->
        <div class="orderContent">
          <el-table
            :data="tableData"
            style="width: 100%;border:none;"
            class="orderTable"
            :header-cell-style="tableHeader"
            :cell-style="cellStyle"
          >
            <!-- 订单编号 -->
            <el-table-column prop="order_sn" label="订单编号">
              <template slot-scope="scope">
                <span class="order_sn_p">
                  {{ scope.row.order_sn }}
                </span>
              </template>
            </el-table-column>

            <!-- 商品图片 -->
            <el-table-column label="商品">
              <template slot-scope="scope">
                <img class="goodsImg" :src="show_url + scope.row.images[0]" />
              </template>
            </el-table-column>

            <!-- 创建时间 -->
            <el-table-column prop="create_time" label="时间"> </el-table-column>

            <!-- 用户地址 -->
            <el-table-column prop="hashcode" label="用户地址">
              <template slot-scope="scope">
                <p
                  class="hashCodeToolTip"
                  :class="'hashCodeToolTip' + scope.row.order_sn"
                  @mouseenter="hashMouseenter('hashCodeToolTip' + scope.row.order_sn)"
                  @mouseleave="hashMouseleave('hashCodeToolTip' + scope.row.order_sn)"
                >
                  {{ scope.row.hashcode }}
                </p>
                <p
                  @mouseenter="hashMouseenter('hashCodeToolTip' + scope.row.order_sn)"
                  @mouseleave="hashMouseleave('hashCodeToolTip' + scope.row.order_sn)"
                  class="hashCode"
                >
                  {{ hashcodeSubstring(scope.row.hashcode) }}
                </p>
              </template>
            </el-table-column>

            <!-- 商品价格 -->
            <el-table-column label="价格">
              <template slot-scope="scope">
                <span v-if="scope.row.price">¥ {{ scope.row.price }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>

            <!-- 商品状态 -->
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-button
                  @click="stateClick(scope.row)"
                  type="text"
                  size="small"
                  :class="
                    scope.row.status_name === '已付款' ||
                    scope.row.status_name === '已取消' ||
                    scope.row.status_name === '已接收'
                      ? 'paid'
                      : scope.row.status_name === '未付款'
                      ? 'unpaid'
                      : scope.row.status_name === '盲盒获取'
                      ? 'blind'
                      : 'present'
                  "
                  >{{
                    scope.row.status_name === "未付款" ? "去支付" : scope.row.status_name
                  }}</el-button
                >
                <el-button
                  v-if="scope.row.status_name === '未付款'"
                  @click="openResetOrderDialog(scope.row)"
                  type="text"
                  size="small"
                  class="present resetOrder"
                  >取消订单</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="pag" v-show="tableData.length !== 0">
          <ElPage @handleCurrentChange="changePage" :total="total" :pageSizes="[5]" />
        </div>
      </div>
    </div>

    <!-- mobile part -->
    <div class="mobilePart">
      <!-- user card part -->
      <div class="userPart" :class="{ wxUserPart: isWx }">
        <template v-if="!isLoggedIn">
          <img src="@/assets/images/mobile_black/center/avatar_default.png" />
          <span class="gotoLogin" @click="gotoLogin">去登录/注册</span>
        </template>

        <template v-else>
          <img
            :src="
              userInfo.avatar
                ? userInfo.avatar
                : require('@/assets/images/mobile_black/center/avatar_default.png')
            "
          />

          <div class="login_right">
            <div class="firstLine">
              <span class="username" v-if="userInfo.nickname">{{ userInfo.nickname }}</span>
              <div class="auth_yes" v-if="userInfo.is_auth === 1">
                <img src="@/assets/images/mobile_black/center/auth_already.png" />
                <span>已认证</span>
              </div>
              <div class="auth_not" v-else>
                <img src="@/assets/images/mobile_black/center/auth_not.png" />
                <span>未认证</span>
              </div>
            </div>

            <div class="secondLine" @click="gotoBlockchain" v-if="userInfo.is_auth === 1">
              区块链地址：{{ hashcodeSub }}
            </div>

            <div class="thirdLine">
              {{ userInfo.remark || "这个人什么也没留下" }}
            </div>
          </div>

          <div class="login_arrow" @click="gotoPersonalModify">
            <img src="@/assets/images/mobile_black/center/arrow_right.png" />
          </div>
        </template>
      </div>

      <!-- order part -->
      <div class="orderPart">
        <div class="title">我的订单</div>
        <ul class="order">
          <li @click="gotoCurrentlyOwened">
            <van-badge
              v-if="isLoggedIn && cardCountFlag.already_pay_num > 0"
              :content="badgeTotal(userInfo.already_pay_num, 1)"
            >
              <img src="@/assets/images/mobile_black/center/have.png" />
            </van-badge>
            <img v-else src="@/assets/images/mobile_black/center/have.png" />
            <span>已拥有</span>
          </li>
          <li @click="gotoUnpaid">
            <van-badge
              v-if="isLoggedIn && cardCountFlag.wait_pay_num > 0"
              :content="badgeTotal(userInfo.wait_pay_num, 2)"
            >
              <img src="@/assets/images/mobile_black/center/unpaid.png" />
            </van-badge>
            <img v-else src="@/assets/images/mobile_black/center/unpaid.png" />
            <span>未付款</span>
          </li>
          <li @click="gotoCancelled">
            <van-badge
              v-if="isLoggedIn && cardCountFlag.over_pay_num > 0"
              :content="badgeTotal(userInfo.over_pay_num, 3)"
            >
              <img src="@/assets/images/mobile_black/center/cancel.png" />
            </van-badge>
            <img v-else src="@/assets/images/mobile_black/center/cancel.png" />
            <span>已取消</span>
          </li>
        </ul>
      </div>

      <!-- tabs part -->
      <div class="tabsPart">
        <div class="title">我的功能</div>
        <ul class="tabs">
          <li @click="gotoFavorite">
            <img src="@/assets/images/mobile_black/center/favorite.png" />
            <span>我的点赞</span>
          </li>
          <li @click="gotoCollection">
            <img src="@/assets/images/mobile_black/center/collection_mine.png" />
            <span>我的收藏</span>
          </li>
          <li @click="gotoAuthentication">
            <img src="@/assets/images/mobile_black/center/auth.png" />
            <span>身份认证</span>
          </li>
          <li @click="gotoPage">
            <img src="@/assets/images/mobile_black/center/password.png" />
            <span>支付密码</span>
          </li>
          <li @click="gotoAboutUs">
            <img src="@/assets/images/mobile_black/center/aboutus.png" />
            <span>关于我们</span>
          </li>
          <li @click="gotoHelpCenter">
            <img src="@/assets/images/mobile_black/center/helpcenter.png" />
            <span>帮助中心</span>
          </li>
          <li @click="gotoInvite">
            <img src="@/assets/images/mobile_black/center/invite.png" />
            <span>邀请好友</span>
          </li>
          <li @click="gotoDiscount">
            <van-badge
              v-if="isLoggedIn && cardCountFlag.coupon_num > 0"
              :content="badgeTotal(userInfo.coupon_num, 4)"
            >
              <img src="@/assets/images/mobile_black/center/discount_m.png" />
            </van-badge>
            <img v-else src="@/assets/images/mobile_black/center/discount_m.png" />
            <span>我的代金券</span>
          </li>
          <li @click="gotoSyntheticList">
            <van-badge
              v-if="isLoggedIn && cardCountFlag.synthetic_num > 0"
              :content="badgeTotal(userInfo.synthetic_num, 5)"
            >
              <img src="@/assets/images/mobile_black/synthetic/synthetic_enter.png" />
            </van-badge>
            <img v-else src="@/assets/images/mobile_black/synthetic/synthetic_enter.png" />
            <span>合成</span>
          </li>
          <li @click="gotoHelpPage">
            <img src="@/assets/images/mobile_black/center/menu.png" />
            <span>流转帮助</span>
          </li>
        </ul>
      </div>

      <!-- bottom part -->
      <div class="bottomPart" v-show="hideshow">
        Copyright © 2022 海南原上区块链科技有限公司
        <br />
        <span @click="linkTo">All Rights Reserved</span>
      </div>
    </div>

    <!-- mobile part background -->
    <div :class="isWx ? 'wxMobilePartBackground' : 'mobilePartBackground'"></div>

    <el-dialog
      class="resetOrderDialog"
      :visible="isResetOrderDialog"
      top="33vh"
      center
      :before-close="closeResetOrderDialog"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div class="dialog_title">
        <img @click="closeResetOrderDialog" src="@/assets/images/pc_black/auth/close.png" />
      </div>

      <div class="dialog_center">
        <p class="center_content">
          您确认取消订单吗？
        </p>
        <div class="dialog_btn">
          <button @click="resetOrder">确定</button>
          <button @click="closeResetOrderDialog">取消</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ElPage } from "@/components";
import { mapActions, mapState, mapMutations } from "vuex";
import {
  getMyOrderListApi,
  createOrderApi,
  payOrderApi,
  cashierPayApi,
  bankcardInfoApi,
  unifiedAplipayOrderApi,
  resetOrderApi
} from "@/api";
import { iscode, isWeixin, getWidth, isApp } from "@/utils";
import baseUrl from "@/utils/baseUrl.js";

export default {
  name: "PersonalCenter",
  components: { ElPage },
  data() {
    return {
      //显示或者隐藏footer
      hideshow: true,
      // 条件筛选表格内容
      filterPickValue: "all",
      // 表格里的数据
      tableData: [],
      // 默认当前分页
      currentPage: 1,
      // 每页显示个数
      perPage: 5,
      // 一共有多少个
      total: 0,
      // 是否是登录状态
      isLoggedIn: false,
      // 数据记号
      cardCountFlag: {
        already_pay_num: 0,
        wait_pay_num: 0,
        over_pay_num: 0,
        collect_num: 0,
        likes_num: 0,
        coupon_num: 0,
        synthetic_num: 0
      },
      // 图片地址
      show_url: "",
      isWx: false,
      // 是否显示下拉框
      isShowDD: false,
      // 1是pc 2是手机
      platform: 1,
      // 是否显示取消订单弹窗
      isResetOrderDialog: false,
      // 订单id
      order_id: ""
    };
  },
  computed: {
    // 用户信息
    ...mapState(["userInfo"]),

    // hascode大于22个省略
    hashcodeSub() {
      let res = this.userInfo.hashcode;
      if (this.userInfo.hashcode && this.userInfo.hashcode.length > 22) {
        res = this.userInfo.hashcode.substring(0, 21) + "...";
      }
      return res;
    }
  },
  watch: {
    // 解决手机键盘弹起布局错位问题
    showHeight: function() {
      if (this.docmHeight > this.showHeight) {
        //隐藏
        this.hideshow = false;
      } else {
        //显示
        this.hideshow = true;
      }
    }
  },
  mounted() {
    if (getWidth() <= 768) {
      this.platform = 2;
    } else {
      this.platform = 1;
    }

    // 获取当前是否为登录状态
    let localIsLoggedIn = JSON.parse(window.localStorage.getItem("isLogin"));
    if (localIsLoggedIn) {
      this.isLoggedIn = true;
      this.$nextTick(() => {
        // 获取用户信息
        this.getUserInfo();
        // 获取订单列表
        this.getMyOrderList();
      });

      // 如果没有，就给一个0
      let isCardCount = JSON.parse(window.localStorage.getItem("cardCount"));
      if (!isCardCount) {
        let cc = {
          already_pay_num: 0,
          wait_pay_num: 0,
          over_pay_num: 0,
          collect_num: 0,
          likes_num: 0,
          coupon_num: 0,
          synthetic_num: 0
        };
        localStorage.setItem("cardCount", JSON.stringify(cc));
      } else {
        // 如果有，则算一下新的数量与上一次数量的差
        this.cardCountFlag = {
          already_pay_num: this.userInfo.already_pay_num - isCardCount.already_pay_num,
          wait_pay_num: this.userInfo.wait_pay_num - isCardCount.wait_pay_num,
          over_pay_num: this.userInfo.over_pay_num - isCardCount.over_pay_num,
          collect_num: this.userInfo.collect_num - isCardCount.collect_num,
          likes_num: this.userInfo.likes_num - isCardCount.likes_num,
          coupon_num: this.userInfo.coupon_num - isCardCount.coupon_num,
          synthetic_num: this.userInfo.synthetic_num - isCardCount.synthetic_num
        };
      }
    } else {
      this.isLoggedIn = false;
    }

    window.onresize = () => {
      return (() => {
        this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
      })();
    };

    isWeixin() ? (this.isWx = true) : (this.isWx = false);

    // 点击外侧关闭dd
    document.addEventListener("mouseup", e => {
      //获取弹窗对象
      const userCon = document.getElementById("fade_bar_dd2");
      //判断弹窗对象中是否包含点击对象
      if (userCon && !userCon.contains(e.target)) {
        this.isShowDD = false;
      }
    });
  },

  methods: {
    // ----------异步请求相关的方法-----------
    // 获取用户信息
    ...mapActions(["getUserInfo"]),
    ...mapMutations(["setCouponId"]),

    // 获取银行卡信息
    async bankcardInfo(order_sn, coupon_id) {
      let res = await bankcardInfoApi({
        order_sn
      });
      if (iscode(res)) {
        this.setCouponId(coupon_id ?? "");

        if (res.result.list.length > 0) {
          this.$router.push({
            path: "/mail/selectCard",
            query: { order_sn }
          });
        } else {
          this.$router.push({
            path: "/mail/bindCard",
            query: { order_sn }
          });
        }
      }
    },
    // 快捷支付按钮跳转
    async cashierPay(order_sn, user_coupon_id) {
      let res = await cashierPayApi({
        order_sn,
        coupon_id: user_coupon_id ?? ""
      });
      if (iscode(res)) {
        window.location.href = res.result.redirectUrl;
      }
    },
    // 获取订单列表
    async getMyOrderList() {
      let result = null;
      if (this.filterPickValue === "all") {
        result = await getMyOrderListApi({
          page: this.currentPage,
          pagesize: this.perPage
        });
      } else {
        result = await getMyOrderListApi({
          page: this.currentPage,
          pagesize: this.perPage,
          status: this.filterPickValue - 0
        });
      }

      if (iscode(result)) {
        this.show_url = result.result.show_url;
        this.total = result.result.count;
        this.tableData = result.result.list;
      }
    },
    // 阿里支付
    async useAlipay(order_sn, user_coupon_id) {
      // let alipayBaseURL = "";
      // if (user_coupon_id) {
      //   alipayBaseURL =
      //     baseUrl.productionApi +
      //     "/api/pay/unifiedOrder/" +
      //     order_sn +
      //     "/" +
      //     this.platform +
      //     "/" +
      //     user_coupon_id;
      // } else {
      //   alipayBaseURL =
      //     baseUrl.productionApi +
      //     "/api/pay/unifiedOrder/" +
      //     order_sn +
      //     "/" +
      //     this.platform;
      // }

      // window.location.href = alipayBaseURL;

      let res = await unifiedAplipayOrderApi({
        order_sn,
        platform: this.platform,
        coupon_id: user_coupon_id ?? ""
      });
      if (iscode(res)) {
        const divForm = document.getElementsByTagName("alidiv");
        if (divForm.length) {
          document.body.removeChild(divForm[0]);
        }
        const div = document.createElement("div");
        div.innerHTML = res.result; // data就是接口返回的form 表单字符串
        document.body.appendChild(div);
        // document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
        document.forms[0].submit();
        document.body.removeChild(div);
      }
    },
    // 取消订单
    async resetOrder() {
      let res = await resetOrderApi({ id: this.order_id });
      if (iscode(res)) {
        this.$message({
          message: "取消订单成功",
          iconClass: "mySuccessIcon",
          customClass: "mySuccess"
        });
        this.closeResetOrderDialog();
        this.getMyOrderList();
        // window.location.reload()
      }
    },

    // 打开取消订单弹窗
    openResetOrderDialog(payload) {
      this.order_id = payload.id;
      this.isResetOrderDialog = true;
    },
    // 关闭取消订单弹窗
    closeResetOrderDialog() {
      this.isResetOrderDialog = false;
    },

    // async createOrder(goods_id) {
    //   let result = await createOrderApi({
    //     goods_id,
    //     platform: 1, // 1pc 2手机
    //   });
    //   if (result.code == 0) {
    //     let order_sn = result.result;
    //     let res = await payOrderApi({ order_sn });
    //     if (iscode(res)) {
    //       let order_id = res.result.order.id;
    //       this.$router.push({
    //         path: "/mail/confirmProducts",
    //         query: { id: goods_id, order_sn, order_id },
    //       });
    //     }
    //   } else {
    //     this.$message({
    //       message: result.message,
    //       iconClass: "myErrorIcon",
    //       customClass: "myError",
    //     });
    //   }
    // },

    // ----------功能相关的方法-----------
    // badge徽标映射
    badgeTotal(total, type) {
      let result = total;
      // 将本地订单数量和接口获取的数量做减法比较显示
      let cardCount = JSON.parse(localStorage.getItem("cardCount"));
      switch (type) {
        case 1:
          result = result - cardCount.already_pay_num;
          break;
        case 2:
          result = result - cardCount.wait_pay_num;
          break;
        case 3:
          result = result - cardCount.over_pay_num;
          break;
        case 4:
          result = result - cardCount.coupon_num;
          break;
        case 5:
          result = result - cardCount.synthetic_num;
          break;
      }
      return result > 99 ? "99+" : result - 0;
    },

    // 切换页码
    changePage(pageNum) {
      this.currentPage = pageNum;
      this.getMyOrderList();
    },
    // 切换筛选条件
    changeFilterPick(tab, event) {
      // 每次切换的时候把当前页归位
      this.currentPage = 1;
      this.getMyOrderList();
    },
    // hashMouseenter
    hashMouseenter(v) {
      let ele = document.getElementsByClassName(v)[0];
      ele.style.display = "block";
      // ele.style.opacity = 1;
    },
    // hashMousemove
    hashMouseleave(v) {
      let ele = document.getElementsByClassName(v)[0];
      ele.style.display = "none";
      // ele.style.opacity = 0;
    },
    // 只显示25个字符
    hashcodeSubstring(hashcode) {
      let res = hashcode;
      if (hashcode.length > 25) {
        res = hashcode.substring(0, 25) + "...";
      }
      return res;
    },
    descSubstring(desc) {
      let res = desc;
      if (desc.length > 30) {
        res = desc.substring(0, 35) + "...";
      }
      return res;
    },

    // 切换下拉框显示
    changeDD() {
      this.isShowDD = !this.isShowDD;
    },
    // 关闭下拉框
    closeDD() {
      this.isShowDD = false;
    },
    tableHeader() {
      return "border:none;height: 50px;background: #2B2C2D;font-size: 0.07rem;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #959596;line-height: 0.07rem;";
    },
    cellStyle() {
      return "border-color:rgba(255, 255, 255, 0.05);height: 60px;background: #171818;font-size: 0.07rem;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #959596;line-height: 0.07rem;";
    },

    // ----------跳转相关的方法-----------
    // 跳转到个人主页
    gotoPersonalHomePage() {
      this.$router.push("/personalHomePage");
    },
    // 跳转到修改资料页面
    gotoPersonalModify() {
      this.$router.push("/personalModify");
    },
    // 返回按钮触发返回到上个界面
    goBack() {
      this.$router.go(-1);
    },
    // 点击当前拥有卡片跳转到对应界面
    gotoCurrentlyOwened() {
      this.$router.push("/personalCurrentlyOwned");
    },
    // 点击我的收藏卡片跳转到对应界面
    gotoCollection() {
      this.$router.push("/personalCollection");
    },
    // 点击我的点赞卡片跳转到对应界面
    gotoFavorite() {
      this.$router.push("/personalFavorite");
    },
    // 点击我的代金券卡片跳转到对应界面
    gotoDiscount() {
      this.$router.push("/discount");
    },
    // 点击合成卡片跳转到对应界面
    gotoSyntheticList() {
      this.$router.push("/syntheticList");
    },
    // 跳转到移动身份认证界面
    gotoAuthentication() {
      if (this.isLoggedIn) {
        if (this.userInfo.is_auth === 1) {
          this.$toast({
            className: "authentication_already",
            message: "身份已认证",
            duration: 2000
          });
        } else {
          this.$router.push("/authentication");
        }
      } else {
        this.$router.push("/login");
      }
    },
    // 跳转到pc身份认证界面
    gotoAuth() {
      this.$router.push("/auth");
    },
    // 跳转到关于我们界面
    gotoAboutUs() {
      this.$router.push("/aboutUs");
    },
    // 跳转到帮助中心界面
    gotoHelpCenter() {
      // this.$router.push("/helpCenter");
      window.open(
        "https://www.yuque.com/docs/share/4b5d5f77-7dfd-4924-b3ac-b70f95d2760e",
        "_blank"
      );
    },
    // 跳转到个人信息修改界面
    gotoPersonalModify() {
      this.$router.push("/personalModify");
    },
    // 跳转到未支付界面
    gotoUnpaid() {
      this.$router.push("/unpaid");
    },
    // 跳转到已取消界面
    gotoCancelled() {
      this.$router.push("/cancelled");
    },
    // 跳转到登录界面
    gotoLogin() {
      this.$router.push("/login");
    },
    // 跳转到对应界面
    stateClick(payload) {
      switch (payload.status_name) {
        case "未付款":
          // this.createOrder(payload.goods_id);
          // this.$router.push({
          //   path: "/mail/confirmProducts",
          //   query: { id: payload.goods_id, order_sn: payload.order_sn },
          // });
          if (payload.pay_type == 1) {
            this.useAlipay(payload.order_sn, payload.user_coupon_id);
          } else if (payload.pay_type == 4) {
            this.cashierPay(payload.order_sn, payload.user_coupon_id);
          } else if (payload.pay_type == 6) {
            this.bankcardInfo(payload.order_sn, payload.user_coupon_id);
          } else {
            this.$router.push({
              path: "/mail/confirmProducts",
              query: { id: payload.goods_id, order_sn: payload.order_sn }
            });
          }
          break;
        case "已付款":
          this.$router.push({
            path: "/personalCollectionPage",
            query: { id: payload.goods_id, order_id: payload.id }
          });
          break;
        case "已取消":
          this.$router.push({
            path: "/mail/productDetail",
            query: { id: payload.goods_id }
          });
          break;
        case "已接收":
          this.$router.push({
            path: "/personalCollectionPage",
            query: { id: payload.goods_id, order_id: payload.id }
          });
          break;
        case "盲盒获取":
          this.$router.push({
            path: "/personalCollectionPage",
            query: { id: payload.goods_id, order_id: payload.id }
          });
          break;
      }
    },
    // 跳转到区块链链接界面
    gotoBlockchain() {
      this.$router.push("/blockchain");
    },
    // 跳转方法：跳转到指定地址（支付密码或者修改密码）
    gotoPage() {
      if (this.userInfo.is_pwd === 0) {
        this.$router.push("/setPassword");
      } else {
        this.$router.push("/resetPassword");
      }
    },
    // 跳转到邀请界面
    gotoInvite() {
      let isLogin = JSON.parse(localStorage.getItem("isLogin"));
      if (isLogin) {
        this.$router.push("/mail/inviteCode");
      } else {
        this.$toast("您还没有登录!");
        this.$router.push("/login");
        return;
      }
    },
    // bottom part
    linkTo() {
      window.open("https://beian.miit.gov.cn/#/Integrated/index", "_blank");
    },
    // 跳转到流转帮助
    gotoHelpPage() {
      const isApp = JSON.parse(window.localStorage.getItem("isApp"));
      if (isApp) {
        this.$router.push({
          path: "/trade",
          query: {
            isHelp: 1
          }
        });
      } else {
        this.$toast("请在APP中打开");
        setTimeout(() => {
          this.$router.push("/appDownload");
        }, 1000);
      }
    }
  }
};
</script>

<style lang="less" scoped>
// pc
#personalCenter {
  width: 100%;
  height: 100%;
  padding-bottom: 160px;

  // -隐藏移动端样式
  .mobilePartBackground,
  .wxMobilePartBackground,
  .mobilePart {
    display: none;
  }

  // -版心
  .wrapper {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden; // bfa
  }

  // -退回按钮div
  .back_part {
    width: 100%;
    padding-top: 20px;

    .back_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 104px;
      height: 30px;
      border: none;
      background: none;
      background-image: url("../../assets/images/personalCenter/btn.png");
      background-position: center center;
      background-size: 100% 100%;
      cursor: pointer;

      img {
        width: 20px;
        height: 6px;
      }

      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 12px;
        margin-left: 10px;
      }
    }
  }

  // -中间个人资料展示div
  .centerBackground {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 160px;
    margin-top: 20px;
    background-image: url("../../assets/images/pc_black/center/background.png");
    background-position: center center;
    background-size: 100% 100%;
    padding: 40px;

    // 个人信息部分
    .userInfo {
      display: flex;
      align-items: center;
      height: 100%;

      .userInfo_left {
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }

      .userInfo_right {
        display: flex;
        flex-direction: column;
        margin-left: 20px;

        .first_line {
          display: flex;
          margin-top: 2px;

          .line_item:nth-child(1) {
            font-size: 22px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 22px;
          }

          .line_item:nth-child(2) {
            display: flex;
            align-items: center;
            margin-left: 20px;

            img {
              width: 12px;
              height: 12px;
              margin: 0;
            }

            span {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              line-height: 12px;
              margin-left: 4px;
            }

            .isCertifiedOk {
              color: #00ffb0;
            }

            .isCertifiedNotOk {
              color: #999999;
            }

            button {
              border: none;
              background: none;
              background-size: 100% 100%;
              background-position: center center;
              background-image: url("../../assets/images/pc_black/center/auth_btn.png");
              min-width: 74px;
              height: 22px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #00ffb0;
              word-break: keep-all;
              line-height: 12px;
              margin-left: 14px;
              cursor: pointer;
            }
          }
        }

        .second_line {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 11px;
          margin-top: 10px;

          .qklAddress {
            cursor: pointer;
          }
        }

        .third_line {
          width: 360px;
          height: 14px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 14px;
          white-space: nowrap;
          margin-top: 15px;
        }
      }
    }

    // 按钮部分
    .userBtn {
      display: flex;
      align-items: center;

      i {
        width: 1px;
        height: 12px;
        opacity: 0.3;
        border: 1px solid #ffffff;
        margin: 0 37px 0 29px;
      }

      .userBtn_btn_left,
      .userBtn_btn_right {
        display: flex;
        justify-content: center;
        align-items: center;
        background: none;
        border: none;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #00ffb0;
        line-height: 14px;
        margin: 0;
        padding: 0;
      }

      .userBtn_btn_left_box {
        display: flex;
        align-items: center;
        cursor: pointer;
      }

      .userBtn_btn_left_img {
        width: 14px;
        height: 14px;
        margin-right: 7px;
      }

      .userBtn_btn_right {
        position: relative;
        cursor: pointer;

        span {
          margin: 0;
          padding: 0;
          margin: 0 11px 0 8px;
        }

        .setter_img_left {
          width: 13px;
          height: 14px;
          margin: 0;
          padding: 0;
        }

        .setter_img_right {
          width: 20px;
          height: 20px;
        }

        .bar_dd {
          position: absolute;
          top: 30px;
          right: -30px;
          width: 138px;
          background: #1e2020;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
          border-radius: 4px;

          ul,
          li {
            width: 100%;
            list-style: none;
            margin: 0;
            padding: 0;
          }

          ul {
            padding: 10px 0;
          }

          li {
            display: flex;
            align-items: center;
            height: 34px;
            padding-left: 15px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 14px;
            cursor: pointer;
            opacity: 0.5;
            transition: all 0.2s;
          }

          li:hover {
            background: rgba(255, 255, 255, 0.03);
            opacity: 1;
          }
        }
      }

      .fade-enter-active,
      .fade-leave-active {
        transition: all 0.3s;
      }

      .fade-enter,
      .fade-leave-active {
        opacity: 0;
      }

      // 双击不选中
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;
    }
  }

  // -中间卡片展示div
  .cards {
    display: flex;
    width: 100%;
    height: 120px;
    background: #2b2c2d;
    padding-left: 40px;

    // 每个卡片
    .cards_background {
      display: flex;
      align-items: center;
      height: 100%;
      margin-right: 60px;
      cursor: pointer;

      // 卡片里的图片
      img {
        width: 40px;
        height: 38px;
      }

      span {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 14px;
        margin-left: 20px;
      }
    }

    /deep/.el-badge__content {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: 0;
      background: #f24038;
      border-radius: 8px;
      border: none;
      font-size: 12px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 12px;
      height: 16px;
      min-width: 16px;
      padding: 0 4px;
      text-align: center;
    }
  }

  // -订单管理
  .order {
    width: 100%;
    margin-top: 30px;

    // 订单管理表格上面的标题文字
    .orderTitle {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 18px;
    }

    // 订单管理表格筛选tab栏
    .orderFilter {
      margin-top: 21px;

      // tab栏边距调整
      /deep/.el-tabs__header {
        margin: 0;
        padding: 0;
      }

      // 字体样式修改
      /deep/.el-tabs__item {
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        line-height: 14px;
        height: auto;
        color: #999999;
        padding-bottom: 7px;
      }

      /deep/.el-tabs__item.is-active {
        color: #ffffff;
      }

      /deep/.el-tabs__nav,
      /deep/.el-tabs__nav-wrap {
        margin: 0;
        padding: 0;
      }

      // 长下划线样式
      /deep/.el-tabs__nav-wrap::after {
        opacity: 0;
        height: 2px;
      }

      // 当前选中下滑蓝边
      /deep/.el-tabs__active-bar {
        height: 2px;
        background: #00ffb0;
      }
    }

    // 订单管理表格
    .orderContent {
      .orderTable {
        margin-top: 20px;
        background: none;

        // 表格里的图片
        .goodsImg {
          width: 44px;
          height: auto;
          max-height: 44px;
        }

        // 已支付的样式
        .paid {
          color: #959596 !important;
        }

        // 未支付的样式
        .unpaid {
          color: #00ffb0 !important;
        }

        // 已转赠
        .present {
          color: #ff8686 !important;
          cursor: unset;
        }

        // 盲盒获取
        .blind {
          color: #ff8686 !important;
        }

        // 订单号
        .order_sn_p {
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          line-clamp: 2;
          -webkit-line-clamp: 2; //显示几行
          word-break: break-all;
        }

        .resetOrder {
          transform: translateX(15px);
          cursor: pointer;
        }

        // 表单每行
        /deep/.cell {
          text-align: center;
        }

        /deep/.el-table__row,
        /deep/.el-table th,
        /deep/.el-table tr {
          background: none !important;
        }
      }
    }

    // 底部分页
    .pag {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 60px;
    }
  }

  /deep/.el-table__body-wrapper,
  .el-table {
    overflow: unset;
    border: none !important;
  }

  /deep/.el-table__empty-text {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #959596;
    line-height: 14px;
  }

  /deep/.hashCode {
    width: 139px;
  }

  .hashCodeToolTip {
    transition: all 0.3s ease;
    // border: 1px solid rgb(231, 231, 231);
    padding: 5px;
    background: rgb(51, 51, 51);
    color: white;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -35px);
    display: none;
    // opacity: 0;
    white-space: pre-wrap;
    z-index: 99999;
    width: 250px;
    // pointer-events: none;
  }

  .hashCodeToolTip::after {
    content: "";
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid rgb(51, 51, 51);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
  }

  .hashCode {
    display: block;
    margin: 0 auto;
    text-align: center;
  }
}

/deep/.el-table::before {
  height: 0 !important;
  width: 0 !important;
  display: none !important;
  background: none !important;
  background-color: #959596;
}

// exchange dialog
.resetOrderDialog {
  /deep/.el-dialog {
    max-width: 460px;
    height: 220px;
    background: #1e2020;
    border-radius: 10px;

    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      margin: 0;
      padding: 0;

      .dialog_title {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        padding: 30px 30px 0 0;

        img {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
      .dialog_center {
        position: relative;
        width: 100%;
        padding-top: 25px;

        .center_content {
          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 18px;
          text-align: center;
        }

        .dialog_btn {
          display: flex;
          justify-content: space-between;
          margin-top: 50px;
          padding: 0 75px;

          button {
            width: 96px;
            height: 32px;
            border-radius: 3px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 14px;
            cursor: pointer;
          }
          button:nth-child(2) {
            background: #1e2020;
            border: 1px solid #666666;
            color: #999999;
          }
          button:nth-child(1) {
            background: #00ffb0;
            border: none;
            color: #1e2020;
          }
        }
      }

      // 双击不选中
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;
    }
  }
}

/deep/.el-dialog__wrapper {
  background: rgba(0, 0, 0, 0.8);
}

// mobile (<=768px)
@media screen and (max-width: 768px) {
  #personalCenter {
    min-height: 1424px;
    padding-bottom: 0;

    // -版心充满
    .wrapper,
    // -隐藏pc
    .back_part,
    .centerBackground,
    .cards,
    .order {
      display: none;
    }

    // -------mobile part---------
    .mobilePart {
      position: absolute;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      // min-height: 1624px;
      min-height: 1424px;
      padding: 0 30px;
      overflow: hidden;

      /* 设置滚动条的样式 */
      ::-webkit-scrollbar {
        display: none;
      }

      // userPart
      .userPart {
        position: relative;
        display: flex;
        width: 100%;
        height: 132px;
        margin-top: 90px;
        z-index: 99999;

        img {
          width: 116px;
          height: 116px;
          border-radius: 50%;
        }

        .gotoLogin {
          font-size: 36px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 36px;
          margin-top: 40px;
          margin-left: 40px;
        }

        .login_right {
          display: flex;
          flex-direction: column;
          margin-left: 40px;

          .firstLine {
            display: flex;

            .username {
              font-size: 35px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
            }

            .auth_yes,
            .auth_not {
              display: flex;
              align-items: flex-end;
              margin-left: 20px;

              img {
                width: 24px;
                height: 24px;
                margin: 0;
              }

              span {
                font-size: 24px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 24px;
                margin-left: 8px;
              }
            }

            .auth_yes {
              span {
                color: #00ffb0;
              }
            }
          }

          .secondLine {
            font-size: 22px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 22px;
            margin-top: 22px;
          }

          .thirdLine {
            width: 470px;
            font-size: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 20px;
          }
        }

        .login_arrow {
          position: absolute;
          right: 0;
          top: 36px;

          img {
            width: 40px;
            height: 40px;
            margin: 0;
          }
        }
      }

      .wxUserPart {
        margin-top: 134px !important;
      }

      // orderPart
      .orderPart {
        width: 100%;
        height: 240px;
        background: #2b2c2d;
        box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        margin-top: 50px;
        z-index: 99999;

        .title {
          font-size: 30px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff !important;
          margin: 30px 0 50px 30px;
        }

        .order {
          display: flex;
          justify-content: space-between;
          width: 100%;
          min-height: unset;

          li {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            width: 33%;
            height: 90px;

            img {
              width: 44px;
              height: 44px;
            }

            span {
              font-size: 26px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
            }

            /deep/.van-badge {
              height: 30px;
              min-width: 30px;
              background: #f24038;
              border-radius: 15px;
              border: 1px solid #2b2c2d;
              font-size: 22px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #2b2c2d;
              padding: 3px 6px 6px 6px;
            }
          }
        }
      }

      // tabsPart
      .tabsPart {
        width: 100%;
        // height: 380px;
        background: #2b2c2d;
        box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        margin-top: 20px;

        .title {
          font-size: 30px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff !important;
          margin: 30px 0 50px 30px;
        }

        .tabs {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          padding: 0 34px;
          min-height: unset;
          min-width: unset;

          li {
            display: flex;
            width: 25%;
            flex-direction: column;
            align-items: center;
            margin-bottom: 50px;

            img {
              width: 44px;
              height: 44px;
            }

            span {
              font-size: 26px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              margin-top: 20px;
            }

            /deep/.van-badge {
              height: 30px;
              min-width: 30px;
              background: #f24038;
              border-radius: 15px;
              border: 1px solid #2b2c2d;
              font-size: 22px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #2b2c2d;
              padding: 3px 6px 6px 6px;
            }
          }
        }
      }

      // bottomPart
      .bottomPart {
        position: absolute;
        left: 0;
        bottom: 194px;
        width: 100%;
        text-align: center;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #4b4c4c;
      }
    }

    .mobilePartBackground {
      display: block;
      position: absolute;
      top: 40px;
      right: 0;
      width: 428px;
      height: 488px;
      background: url("../../assets/images/mobile_black/center/center_background.png") no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      z-index: 9999;
    }

    .wxMobilePartBackground {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 428px;
      height: 488px;
      background: url("../../assets/images/mobile_black/center/center_background.png") no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      z-index: 9999;
    }
  }
}
</style>
